<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
    <style>
        select{
            /*padding: 0 1%;*/
            width: 130px;
            height: 30px;
            font-size: 15px;
            line-height: 30px;
            text-align: center;
            text-align-last: center;

        }
    </style>
</head>
<body>
<select name="" id="provinces">
    <option value=" ">--请选择省份--</option>
</select>

<select name="" id="citys">
    <option value=" ">--请选择城市--</option>
</select>

<select name="" id="countries">
    <option value=" ">--请选择区县--</option>
</select>
<script src="./jquery-3.3.1.min.js"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->

<script>
    var provinces=[{id:0,name:"河南省"},{id:0,name:"山西省"},{id:0,name:"山东省"}];
    var cities=[["郑州","开封","洛阳","周口"],["太原","大同","阳泉"],["烟台","青岛","济南","威海"]];
    var countires=[[["龙湖区","新郑区"],["金明区","南关区"],["老城","洛龙"],["商水","周口"]],[["迎泽区","万柏林区","小店区","杏花岭区"],["城区","矿区"],["南边区","小北沟"]],[["莱山区","福山区","芝罘区"],["市南","市北"],["市中区","天桥区"],["文登市","乳山市"]]];
    var index1;
    var index2;
    //    $(function) 必需。规定当文档加载后要运行的函数。
    $(function () {
        for (var i=0;i<provinces.length;i++){
            $('#provinces').append("<option value='"+provinces[i].id+"'>"+provinces[i].name+"</option>");
        }
        $("#provinces").change(function () {
            $("#citys").children().not(":eq(0)").remove();
//            alert($(this).children("option:selected").index());
            $(this).children("option:selected").index();
            index1=$(this).children("option:selected").index();
            var city=cities[index1-1];
            for (var j=0;j<city.length;j++) {
                console.log(city[j]);
                $("#citys").append("<option>" + city[j] + "</option>");
            }
            });
        $("#citys").on('change',function(){
            $("#countries").children().not(":eq(0)").remove();
            index2 = $(this).children("option:selected").index();
            console.log($(this).children("option:selected").index());
            var contr=countires[index1-1][index2-1];
            console.log(contr);
            console.log('------------');
            for( var k=0;k<contr.length;k++){
                console.log(contr[k]);
                $("#countries").append("<option>"+contr[k]+"</option>");
            }
        });
    })



</script>


</body>
</html>